<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>computed</title>
	<script src="lib/vue-2.1.3-min.js"></script>
	<script src="lib/lodash.min.js"></script>
</head>
<body>
	<div id="computed">
		{{ message }} <br/>
		{{ reverseMessage }}
	</div>
	<script>
		var vue = new Vue({
			el: "#computed",
			data: {
				message: "hello"
			},
			computed: {
				reverseMessage: function() {
					return this.message.split("").reverse().join("");
				}
			}
		})
	</script>


	<div id="watch">
		<input type="text" v-model="question">
		<div>{{ answer }}</div>
	</div>
	<script>
		var vue = new Vue({
			el: "#watch",
			data: {
				question: "",
				answer: "please ask q!"
			},
			watch: {
				question: function(newQ){
					this.answer = "wait for answer";
					this.getAnswer();
				}
			},
			methods: {
				getAnswer: _.debounce(function(){
					var vm = this;
					vm.answer = ".....???$$$";
				}, 1100)
			}
		})
	</script>
</body>
</html>